<template>
	<view class="personal-info">
		<!-- 新进页面 -->
		<u-cell-group>
			<!-- <view class='ul'>
				<view class='li' @click="custodian_show = true">
					<view class="u-cell__title ">身份</view>
					<view class=""
						style="display: flex; flex-direction: row;justify-content: flex-end;align-items: center;">
						<input class='catname_s' type="idcard" v-model="userInfo.onsfz" disabled=""
							placeholder="请选择身份" />
						<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 10rpx;">
						</u-icon>
					</view>
				</view>
				<u-picker :show="custodian_show" :columns="col_list" keyName="label" @confirm="custodian_list"
					@cancel="custodian_show = false">
				</u-picker>
			</view> -->
			<view class="">
				<!-- <view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">身份</view>
						<input class='catname' type="text" v-model="identity" placeholder="请输入名字" disabled />
					</view>
				</view> -->
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">姓名</view>
						<input class='catname' type="text" v-model="userInfo.member_name" placeholder="请输入名字" />
					</view>
				</view>
				<!-- <view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view  class="u-cell__title ">性别</view>
						<view class='catnames'>
							<u-radio-group v-model="userInfo.sex" @change="groupChange">
								<u-radio label="男" :name="1" activeColor="#3c7efc" />
								<u-radio label="女" :name="2" customStyle="margin-left: 60rpx;" activeColor="#3c7efc" />
							</u-radio-group>
						</view>
					</view>
				</view> -->
				<!-- <view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view  class="u-cell__title ">年龄</view>
						<input class='catname' type="text" v-model="userInfo.member_phone" placeholder="请输入年龄" />
					</view>
				</view> -->
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">身份证号</view>
						<input class='catname' type="idcard" v-model="userInfo.member_idCard" placeholder="请输入身份证号" maxlength="18"/>
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">手机号(账号)</view>
						<input class='catname' type="number" v-model="userInfo.member_phone" placeholder="请输入手机号" maxlength="11"/>
					</view>
				</view>
				<view class='line'></view>

				<view class='ul'>
					<view class='li' >
						<view class="u-cell__title ">登录密码</view>
						<view class="" style="display: flex;flex-direction: row; justify-content: flex-end;flex: 1; align-items: center;">
							<input class='catname_dd' type="password" v-model="userInfo.member_password" placeholder="请输入6位登录密码" maxlength="6"/>
							<view class="uni-icon" @click="clearIcon">
								<u-icon name="close-circle" size="18"></u-icon>
							</view>
						</view>
						<!-- <view class="" style="display: flex;flex-direction: column; justify-content: flex-end; ">
							<view class="" style="display: flex;flex-direction: row; justify-content: flex-end;flex: 1; align-items: center;">
								<input class='catname_dd' type="password" v-model="userInfo.member_password" placeholder="请输入登录密码" maxlength="8"/>
								<view class="uni-icon" @click="clearIcon">
									<u-icon name="close-circle" size="18"></u-icon>
								</view>
							</view>
							<view class="" style="height: 30rpx;font-size: 20rpx;line-height: 20rpx;text-align: right;">
								密码小写字母加数字
							</view>
						</view> -->
						
					</view>
				</view>
				<view class='line'></view>
				
				<view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">确认密码</view>
						<view class="" style="display: flex;flex-direction: row; justify-content: flex-end;flex: 1; align-items: center;">
							<input class='catname_dd' type="password" v-model="memberpassword" placeholder="请输入确认密码" maxlength="6"/>
							<view class="uni-icon" @click="clear_Icon">
								<u-icon name="close-circle" size="18"></u-icon>
								<!-- <image src="../../static/1.png" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;" mode=""></image> -->
							</view>
						</view>
					</view>
				</view>
				<view class='line'></view>

				<view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">紧急联系人</view>
						<input class='catname' type="text" v-model="userInfo.emergency_contact_name"
							placeholder="请输入紧急联系人" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">紧急联系人电话</view>
						<input class='catname' type="number" v-model="userInfo.emergency_contact_phone" maxlength="11"
							placeholder="请输入手机号" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">体检报告</view>
					</view>
				</view>
				<view class='ul'>
					<view class='li'>
						<!-- <view @click="upload">
							<image v-if="userInfo.medical_report == ''" src="../../static/tupian.png" mode=""
								style="width: 100rpx;height: 100rpx;"></image>
							<image v-else :src="userInfo.medical_report" mode="" style="width: 100rpx;height: 100rpx;">
							</image>
						</view> -->
						<view class="upload">
							<u-upload :fileList="fileList1" name="1" width="148rpx" height="148rpx" 
								@afterRead="afterRead" @delete="deletePic" multiple :maxCount="9" />
						</view>
					</view>
				</view>
				<!-- <view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">头像</view>
					</view>
				</view>
				<view class='ul'>
					<view class='li'>
						<view @click="scanPicture">
							<image v-if="userInfo.member_photo == ''" src="../../static/tupian.png" mode=""
								style="width: 100rpx;height: 100rpx;"></image>
							<image v-else :src="userInfo.member_photo" mode="" style="width: 100rpx;height: 100rpx;">
							</image>
						</view>
					</view> 
				</view>-->
			</view>
		</u-cell-group>
		<view class="btns flex-between" v-if="isEdit">
			<view class="" @click="edit">编辑</view>
		</view>
		<view class="btns flex-between">
			<view class="" @click="submit">提交审核</view>
		</view>
		<u-modal :show="show" :title="title" :content='content'></u-modal>
		
		<u-popup :show="shows" mode="center" width="600rpx" round="30rpx" height='700rpx' :safeAreaInsetBottom='false'>
			<view class="agent-box d-font-28"
				style="background-image: url('/static/caozuoxuzhi.png');background-size: 100% 100%;height: 730rpx;">
				<!-- <view class="d-p-30 d-text-center">{{ title }}</view> -->
				<view class="" style="margin-top: 180rpx;">
					<scroll-view scroll-y class="agent-content d-p-l-30 d-p-r-30">
						<!-- <u-parse :content="content"></u-parse> -->
						<view class="" style="padding: 0 20rpx;">
							<view class="" style="line-height: 44rpx;font-size: 26rpx;">
								<text style="font-weight: 600;">1.</text style="">用户登录需登记身份信息，如需添加家属信
								息,请在个人中心“我的家属”添加并审核,校外
								人员请在登录时申请认证。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">2.</text>所有用户需提供有效体检报告,申请认证，未
								通过用户无法进行购票购卡操作。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">3.</text>通过认证的用户可进行购票购卡操作,并预约
								对应的游泳日期和时段。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">4.</text>用户成功预约游泳后,请在对应的时间段到馆
								进行游泳。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">5.</text>6岁以下及65岁以上人群由成年人注册后从个人中心处绑定，无法单独注册及购票
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">6.</text>本馆入场需一个成年人陪护一名被监护人，一人带多人不准进入
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="d-flex d-row-center d-p-t-20 d-p-b-20">
					<view>
						<u-button type="primary" shape="circle" :custom-style="{
								fontSize: '24rpx',
								background: '#59A0FF',
								width: '180rpx',
								height: '70rpx'
							}" @click="confirm">
							我知道了
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		bodyCheckImg,
		audit_save,upImg
	} from '@/common/api';
	export default {
		data() {
			return {
				istype: 1,
				showInsurancePicker: false,
				userInfo: {
					member_name: "",
					member_phone: "",
					member_idCard: "",
					member_photo: "", //这个是头像的参数吗？
					member_password: "",
					member_type: "12",
					emergency_contact_name: "",
					emergency_contact_phone: "",
					medical_report: "",
					member_id:uni.getStorageSync('member_id'),
					op:'1'
				},
				identity: '外来人员',
				fileList1: [],
				url_phone: '',
				custodian_show: false,
				col_list: [
					[{
							id: 1,
							label: "学生"
						},
						{
							id: 2,
							label: "教师"
						},
						{
							id: 3,
							label: "外来人员"
						}
					]
				],
				Modalshow: false,
				title: '您已提交,请等待平台审核',
				content: '审核认证需1-2个工作日。请在登录页右下查询账号审核状态，审核通过后方可预约购票',
				iswailai: false,
				fileList1: [],
				url_phone: '',
				url_phoneimg: false,
				heading: '',
				showClearIcon: false,
				shows: true,
				memberpassword:'',
				show_ClearIcon:false,
				fileList1: [],
				url_list: [],
			}
		},
		onLoad() {

		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.url_list.splice(event.index, 1)
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://tmhyyg.nuaa.edu.cn/api/member.index/bodyCheckImg', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_list.push(result.data)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			confirm() {
				this.shows = false
			},
			clearInput(event) {
				this.showClearIcon = true
			},
			
			offInput(){
				this.showClearIcon = false
			},
			clearIcon() {
				console.log(798798)
				this.userInfo.member_password = ''
				this.showClearIcon = false
			},
			clear_Icon(event) {
				this.memberpassword = ''
			},
			
			groupChange(n) {
				this.userInfo.sex = n
			},
			//身份选择
			custodian_list(e) {
				console.log(e, 'pp[]')
				this.userInfo.onsfz = e.value[0].label
				this.userInfo.onsfz_id = e.value[0].id
				if (e.value[0].id == 3) {
					this.iswailai = true
				} else {
					this.iswailai = false
				}
				this.custodian_show = false
			},
			
			
			//拍照或选择相册图片
			 scanPicture() {
				let that = this
			    uni.chooseImage({
			      count: 1,
			      sourceType: ['album', 'camera'], //album 从相册选择  camera相机选择
			      success: function(res) {
			       that.userInfo.member_photo = res.tempFiles[0] //页面显示图片
			        that.uploadFile(res.tempFilePaths[0])
			      }
			    })
			},
			 
			 // 上传文件
			   uploadFile(filePath) {
				  let that = this
			    uni.uploadFile({
			      //import.meta.env.VITE_PROXY_TARGET为项目接口调用地址
			      url: 'https://tmhyyg.nuaa.edu.cn/api/member.index/img',
			      filePath: filePath,
			      name: 'file',
			      fileType: 'image',
			      header: {
			      },
			      success: (uploadFileRes) => {
			        const data = JSON.parse(uploadFileRes.data)
					console.log(data,'pp[[[33]]]')
					// uni.$u.toast(data.data);
			        that.userInfo.member_photo = data.data //上传成功后端返回的图片地址
			      },
			      fail: (err) => {
			        uni.showToast({
			          title: '上传失败',
			          icon: 'error'
			        })
			      }
			    })
			  },
			
			
			
			
			imgupload() {
				let that = this
				uni.chooseImage({
				  count: 1, // 默认9, 设置图片的数量
				  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				  sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
				  success: function (res) {
					  console.log(res,'pp')
				    // 成功选取图片后
				    const tempFilePaths = res.tempFilePaths;
				    // 上传图片
				    uni.chooseImage({
				    	count: 1,
				    	success: e => {
				    		upImg({
				    			filePath: e.tempFilePaths[0],
				    			name: 'file'
				    		}).then(res => {
				    			console.log(res, 'iiii')
				    			that.userInfo.member_photo = res + '?' + new Date().getTime();
				    		});
				    	},
				    	fail: () => {
				    		uni.$u.toast('请检测权限');
				    	}
				    });
				  },
				  fail: function (chooseImageErr) {
				    console.log(chooseImageErr); // 选择图片失败的处理
				  }
				});
				
			},
			upload() {
				let that = this
				// 选择图片
				uni.chooseImage({
				  count: 1, // 默认9, 设置图片的数量
				  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				  sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
				  success: function (res) {
					  console.log(res,'pp')
					  // uni.$u.toast(res.tempFilePaths);
				    // 成功选取图片后
				    const tempFilePaths = res.tempFilePaths;
				    // 上传图片
				    bodyCheckImg({
				    	filePath: tempFilePaths[0],
				    	name: 'file'
				    }).then(res => {
				    	console.log(res, 'iiii')
				    	console.log(uni.getStorageSync('authorization_token'),'op')
				    	that.userInfo.medical_report = res + '?' + new Date().getTime();
				    });
				  },
				  fail: function (chooseImageErr) {
				    console.log(chooseImageErr); // 选择图片失败的处理
				  }
				});
				
				// uni.chooseImage({
				// 	count: 1,
				// 	success: e => {
				// 		bodyCheckImg({
				// 			filePath: e.tempFilePaths[0],
				// 			name: 'file'
				// 		}).then(res => {
				// 			console.log(res, 'iiii')
				// 			console.log(uni.getStorageSync('authorization_token'),'op')
				// 			that.userInfo.medical_report = res + '?' + new Date().getTime();
				// 		});
				// 	},
				// 	fail: () => {
				// 		uni.$u.toast('请检测权限');
				// 	}
				// });
			},
			submit() {
				this.userInfo.medical_report = this.url_list
				if (!this.userInfo.member_name) {
					uni.$u.toast('请输入姓名');
					return;
				}
				if (!this.userInfo.member_idCard) {
					uni.$u.toast('请输入证件号码');
					return;
				}
				if (!this.userInfo.member_phone) {
					uni.$u.toast('请输入手机号');
					return;
				}
				if (!uni.$u.test.mobile(this.userInfo.member_phone)) {
					uni.$u.toast('请输入正确的手机号');
					return;
				}
				if (!this.userInfo.member_password) {
					uni.$u.toast('请输入登录密码');
					return;
				}
				if (!this.memberpassword) {
					uni.$u.toast('请输入确认密码');
					return;
				}
				if (!this.userInfo.emergency_contact_name) {
					uni.$u.toast('请输入紧急联系人');
					return;
				}
				if (!this.userInfo.emergency_contact_phone) {
					uni.$u.toast('请输入请输入紧急联系人电话');
					return;
				}
				if (!this.userInfo.medical_report) {
					uni.$u.toast('请输入体检报告');
					return;
				}
				if (this.userInfo.member_password != this.memberpassword) {
					uni.$u.toast('两次密码不一样');
					return;
				}
				
				
				
				

				audit_save(this.userInfo).then(res => {
					uni.showModal({
						title: '您已提交，请等待平台审核',
						content: '审核认证需1-2个工作日。请在登录页右下查询账号审核状态，审核通过后方可预约购票',
						confirmText: "我知道了",
						confirmColor: '#55aaff',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack()
								// 用户点击了确认按钮后的操作
							}
						}
					})
					// setTimeout(() => {
					// 	uni.$u.route({
					// 		type: 'back'
					// 	});
					// }, 1000);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal-info {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: calc(190rpx + env(safe-area-inset-bottom));

		/deep/.u-cell-group {
			background-color: #fff;
			flex-grow: 0;

			.u-cell-group__wrapper>.u-line {
				display: none;
			}

			.u-cell__body {
				padding: 0 18rpx 0 32rpx;
				height: 110rpx;
			}

			.u-cell__title {
				color: #333;
				font-size: 32rpx !important;
				font-weight: 500;

				&.required {
					&::before {
						content: '*';
						color: #fb2222;
					}
				}
			}

			.u-cell__value {
				color: #999;
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: center;

			view {
				width: 90%;
				height: 80rpx;
				background-color: #3c7efc;
				text-align: center;
				line-height: 80rpx;
				border-radius: 80rpx;
				color: #fff;
			}
		}

		.wrap {
			overflow: hidden;
		}

		.ul {
			width: 92%;
			height: 110rpx;
			margin: auto;
		}

		.li {
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			display: flex;
			justify-content: space-between;
		}


		.li .left {
			font-size: 32rpx;
			color: #333;
			text-align: left;
		}


		.catname {
			color: #999;
			margin-left: 10rpx;
			margin-top: 40rpx;
			font-size: 26rpx;
		}
		.catname_dd {
			color: #999;
			margin-left: 20rpx;
			font-size: 26rpx;
		}
		
		.uni-icon{
			margin-left: 20rpx;
		}

		.catnames {
			color: #999 !important;
			font-size: 26rpx;
			margin-top: 40rpx;
		}

		.catname_s {
			margin-left: 10rpx;
			color: #999 !important;
			font-size: 26rpx;
		}

		input {
			text-align: right;
		}

		.line {
			width: 100%;
			height: 1rpx;
			background-color: #e6e6e6
		}
		.agent-box {
			width: 630rpx;
			// border-radius: 30rpx;
			// background-color: #fff;
		}
		
		.agent-content {
			height: 400rpx;
			box-sizing: border-box;
			// margin-top: 200rpx;
		}


	}
	.upload {
		// width: 148upx;
		// height: 148upx;
		// border-radius: 8upx;
		// border: 2upx solid #D8D8D8;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>